<template>
  <div id="recruitTable">
    <!--状态-->
    <el-steps :active="state===5?0:state" finish-status="success" style="width:400px;margin-bottom:20px">
      <el-step :title="state===5?'退回':'填写'" icon="el-icon-edit"></el-step>
      <el-step title="预审" icon="el-icon-s-claim"></el-step>
      <el-step title="终审" icon="el-icon-s-claim"></el-step>
      <el-step title="发布" icon="el-icon-s-order"></el-step>
    </el-steps>
    <!--退回表单-->
    <el-dialog title="退回原因" :visible.sync="backFormVisible" :close-on-click-modal="false" width="700px" :close-on-press-escape="false">
      <el-form :model="backForm" ref="backForm" :inline="true" inline-message>
        <el-form-item prop="remark">
          <el-input v-model="backForm.remark" style="width:600px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="setState(state===4?3:5)" :loading="btnLoading">提交</el-button>
        <el-button @click.native="backFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <div v-if="state===0||state===5"><!--第一步：提交文件-->
      <div v-if="canEdit">
        <el-upload
          style="width:800px;margin-bottom:10px;"
          ref="upload"
          :action="this.$http.defaults.baseURL+this.$http.defaults.recruitAPI +'api/recruitGenFileInfo/upload'"
          :on-success="handleUploadSucc1"
          :on-error="uploadError"
          :before-upload="beforeUpload"
          accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-works,.wps"
          :show-file-list="false"
        >
          <el-button type="primary" :loading="saveloading">{{step==='bus_announcement'?'上传招聘公告文件':'上传拟聘人选公示文件'}}</el-button>
          <!-- <div slot="tip" class="el-upload__tip">注：支持上传word/pdf/wps文件</div>
          <div style="clear:both" /> -->
        </el-upload>
        <div v-if="!fileListLoading">
          <template v-if="files&&files.length>0">
            <div v-for="(item,index) in files" :key="index" style="height:40px;line-height:40px">
              <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
              <el-button style="margin-left:10px" size="mini" type="danger" @click="beforeRemove(item,step)">删除</el-button>
              <!-- <template v-if="item.fileType==='pdf'"><i style="cursor: pointer;" class="el-icon-search" @click="showfile(item.id)" /></template> -->
            </div>
          </template>
        </div>
        <div v-else>加载中...</div>
        <el-button icon="el-icon-s-promotion" type="success" style="margin-bottom:20px" @click="setState(1)" :loading='btnLoading'>提交</el-button>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <div v-else-if="state===1"><!--第二步：预审-->
      <div v-if="canEdit||canAudit===1">
        <div v-if="!fileListLoading">
          <template v-if="files&&files.length>0">
            <div v-for="(item,index) in files" :key="index" style="height:40px;line-height:40px">
              <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
            </div>
          </template>
        </div>
        <div v-else>加载中...</div>
      </div>
      <div v-else>暂无数据</div>
      <div v-if="canAudit===1">
        <el-button icon="el-icon-success" type="success" style="margin-top:20px" @click="setState(2)" :loading='btnLoading'>预审通过</el-button>
        <el-button icon="el-icon-s-release" type="danger" style="margin-bottom:20px" @click="showBack()">退回</el-button>
      </div>
    </div>
    <div v-else-if="state===2"><!--第三步：终审-->
      <div v-if="!fileListLoading">
        <template v-if="files&&files.length>0">
          <div v-for="(item,index) in files" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <h1>上传正式文件</h1>
      <div v-if="canAudit===2">
        <el-upload
          v-if="batchState"
          style="width:800px;margin-bottom:10px;"
          ref="upload"
          :action="this.$http.defaults.baseURL+this.$http.defaults.recruitAPI +'api/recruitGenFileInfo/upload'"
          :on-success="handleUploadSucc2"
          :on-error="uploadError"
          :before-upload="beforeUpload"
          accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-works,.wps"
          :show-file-list="false"
        >
          <el-button type="primary" :loading="saveloading">上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">注：支持上传word/pdf/wps文件</div>
          <div style="clear:both" /> -->
        </el-upload>
        <div v-if="!fileListLoading">
          <template v-if="files2&&files2.length>0">
            <div v-for="(item,index) in files2" :key="index" style="height:40px;line-height:40px">
              <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
              <el-button v-if="batchState" style="margin-left:10px" size="mini" type="danger" @click="beforeRemove(item,step)">删除</el-button>
              <!-- <template v-if="item.fileType==='pdf'"><i style="cursor: pointer;" class="el-icon-search" @click="showfile(item.id)" /></template> -->
            </div>
          </template>
        </div>
        <div v-else>加载中...</div>
        <div v-if="batchState">
          <el-button icon="el-icon-success" type="success" style="margin-top:20px" @click="setState(3)" :loading='btnLoading'>终审通过</el-button>
          <el-button icon="el-icon-s-release" type="danger" style="margin-bottom:20px" @click="showBack()">退回</el-button>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <div v-else-if="state===3"><!--第三步：发布-->
      <div v-if="!fileListLoading">
        <template v-if="files&&files.length>0">
          <div v-for="(item,index) in files" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <h1>正式文件</h1>
      <div v-if="!fileListLoading">
        <template v-if="files2&&files2.length>0">
          <div v-for="(item,index) in files2" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <h1>发布{{step==='bus_announcement'?'公告':'公示'}}（上传人社部网站公告信息、截图）</h1>
      <div v-if="canEdit">
        <el-upload
          style="width:800px;margin-bottom:10px;"
          ref="upload"
          :action="this.$http.defaults.baseURL+this.$http.defaults.recruitAPI +'api/recruitGenFileInfo/upload'"
          :on-success="handleUploadSucc3"
          :on-error="uploadError"
          :before-upload="beforeUpload"
          accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-works,.wps"
          :show-file-list="false"
        >
          <el-button type="primary" :loading="saveloading">上传发布信息、截图</el-button>
          <!-- <div slot="tip" class="el-upload__tip">注：支持上传word/pdf/wps文件</div>
          <div style="clear:both" /> -->
        </el-upload>
        <div v-if="!fileListLoading">
          <template v-if="files3&&files3.length>0">
            <div v-for="(item,index) in files3" :key="index" style="height:40px;line-height:40px">
              <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
              <el-button style="margin-left:10px" size="mini" type="danger" @click="beforeRemove(item,step)">删除</el-button>
              <!-- <template v-if="item.fileType==='pdf'"><i style="cursor: pointer;" class="el-icon-search" @click="showfile(item.id)" /></template> -->
            </div>
          </template>
        </div>
        <div v-else>加载中...</div>
        <el-button icon="el-icon-s-promotion" type="success" style="margin-bottom:20px" @click="setState(4)" :loading='btnLoading'>提交</el-button>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <div v-else-if="state===4"><!--第四步：完成-->
      <div v-if="!fileListLoading">
        <template v-if="files&&files.length>0">
          <div v-for="(item,index) in files" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <h1>正式文件</h1>
      <div v-if="!fileListLoading">
        <template v-if="files2&&files2.length>0">
          <div v-for="(item,index) in files2" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <h1>发布{{step==='bus_announcement'?'公告':'公示'}}（上传人社部网站公告信息、截图）</h1>
      <div v-if="!fileListLoading">
        <template v-if="files3&&files3.length>0">
          <div v-for="(item,index) in files3" :key="index" style="height:40px;line-height:40px">
            <a href="javascript:void(0)" @click="download(item.id)"><i class="el-icon-paperclip" /> {{item.fileName}}.{{item.fileType}}</a>
            <!-- <template v-if="item.fileType==='pdf'"><i style="cursor: pointer;" class="el-icon-search" @click="showfile(item.id)" /></template> -->
          </div>
        </template>
      </div>
      <div v-else>加载中...</div>
      <el-button v-if="canAudit===2&&batchState" icon="el-icon-s-release" type="danger" style="margin-bottom:20px" @click="showBack()">退回</el-button>
    </div>
    <!-- <div v-else style="padding:20px; font-size:14px;color:#999;text-align:center">暂无数据</div> -->
  </div>
</template>
<script>
export default {
  props: {
    step: '',
    batchState: null,
    timestamp: '',
    canEdit: null,
    unitBatchId: null,
    type: null,
    theYear: null,
    startYear: null,
    state: null,
    canAudit: null
  },
  watch: {
    step (val) {
      console.log(val)
    },
    timestamp (val) {
      if (this.step === 'bus_candidate_registration' || this.step === 'bus_settlement_registration') {
        this.getList()
      }
      this.getFileList()
    },
    canEdit (val) {
      console.log(val)
    },
    type (val) {
      console.log(val)
    },
    unitBatchId (val) {
      console.log(val)
    },
    theYear (val) {
      console.log(val)
    },
    startYear (val) {
      console.log(val)
    },
    state (val) {
      console.log(val)
    },
    batchState (val) {
      console.log(val)
    },
    canAudit (val) {
      console.log(val)
    }
  },
  data () {
    return {
      backForm: {remark: ''},
      backFormVisible: false,
      fileListLoading: false,
      btnLoading: false,
      saveloading: false,
      files: [],
      files2: [],
      files3: []
    }
  },
  methods: {
    showBack () {
      this.backFormVisible = true
      this.backForm.remark = ''
    },
    beforeUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isFormat = file.name.indexOf('.docx') > 0 || file.name.indexOf('.doc') > 0 || file.name.indexOf('.pdf') > 0 || file.name.indexOf('.DOCX') > 0 || file.name.indexOf('.DOC') > 0 || file.name.indexOf('.PDF') > 0 || file.name.indexOf('.wps') > 0 || file.name.indexOf('.WPS') > 0
      const isLt500M = file.size / 1024 / 1024 < 60
      if (!isLt500M) {
        this.$message.error('单个附件不能超过60M!')
      } else {
        this.saveloading = true
      }
      if (!isFormat) {
        this.$message.error('附件格式必须为word、pdf、wps!')
      } else {
        this.saveloading = true
      }
      return isFormat && isLt500M
    },
    async handleUploadSucc1 (response, file, fileList) {
      this.uploadSuccCommon(response, file, fileList, this.step, 'files')
    },
    async handleUploadSucc2 (response, file, fileList) {
      this.uploadSuccCommon(response, file, fileList, this.step + '_2', 'files2')
    },
    async handleUploadSucc3 (response, file, fileList) {
      this.uploadSuccCommon(response, file, fileList, this.step + '_3', 'files3')
    },
    uploadSuccCommon (response, file, fileList, step, obj) {
      if (response.success) {
        let para = {
          id: response.result[0].id,
          businessId: this.unitBatchId,
          businessTable: 'bus_unit_batch',
          businessStep: step
        }
        this.$http.post(this.$http.defaults.recruitAPI + `api/recruitGenFileInfo/save`, para).then(res => {
          this.saveloading = false
          if (res.data.success === true) {
            this.$message({
              message: '上传成功！',
              type: 'success'
            })
            this.getFileList()
          } else {
            console.log('上传失败:' + res.data.message)
            this.$message({
              message: '上传失败:' + res.data.message,
              type: 'error'
            })
          }
        })
          .catch(error => {
            this.saveloading = false
            console.log(error)
            this.$message({
              message: '上传失败:' + error,
              type: 'error'
            })
          })
      } else {
        this.saveloading = false
        this.$message({
          message: '上传失败:' + response.message,
          type: 'error'
        })
      }
    },
    beforeRemove (file) {
      this.$confirm('确定删除' + file.fileName + '.' + file.fileType + '？', '提示', {
        type: 'warning'
      }).then(() => {
        this.handleRemove(file.id)
      })
    },
    handleRemove (id) {
      const url = 'api/recruitGenFileInfo/remove?id=' + id
      this.$http.get(this.$http.defaults.recruitAPI + url).then(res => {
        console.log('删除成功:', res)
        if (res.data.success === true) {
          this.getFileList()
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      })
    },
    uploadError (err) {
      this.saveloading = false
      console.log(err)
      this.$message({
        message: '上传失败:' + err,
        type: 'error'
      })
    },
    download (id) {
      window.open(this.$http.defaults.baseURL + this.$http.defaults.recruitAPI + 'api/recruitGenFileInfo/download?id=' + id)
    },
    getFileList () {
      this.fileListLoading = true
      let para = {
        businessId: this.unitBatchId,
        businessStep: this.step,
        businessTable: 'bus_unit_batch'
      }
      let objName = 'files'
      this.$http.post(this.$http.defaults.recruitAPI + `api/recruitGenFileInfo/getFiles`, para).then(response => {
        this.fileListLoading = false
        if (response.data.success === true) {
          this[objName] = response.data.result
        } else {
          console.log('获取失败:' + response.data.message)
          this.$message({
            message: '获取失败:' + response.data.message,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '网络获取失败:' + error,
          type: 'error'
        })
        this.fileListLoading = false
      })
      if (this.state === 2 || this.state === 3 || this.state === 4) {
        this.fileListLoading = true
        let para2 = {
          businessId: this.unitBatchId,
          businessStep: this.step + '_2',
          businessTable: 'bus_unit_batch'
        }
        this.$http.post(this.$http.defaults.recruitAPI + `api/recruitGenFileInfo/getFiles`, para2).then(response => {
          this.fileListLoading = false
          if (response.data.success === true) {
            this.files2 = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        }).catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.fileListLoading = false
        })
      }
      if (this.state === 3 || this.state === 4) {
        this.fileListLoading = true
        let para2 = {
          businessId: this.unitBatchId,
          businessStep: this.step + '_3',
          businessTable: 'bus_unit_batch'
        }
        this.$http.post(this.$http.defaults.recruitAPI + `api/recruitGenFileInfo/getFiles`, para2).then(response => {
          this.fileListLoading = false
          if (response.data.success === true) {
            this.files3 = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        }).catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.fileListLoading = false
        })
      }
    },
    getNum (i) {
      return i < 10 ? '0' + i : i
    },
    setState (state) {
      if (this.step === 'bus_candidate_registration' || this.step === 'bus_settlement_registration') {
        if (this.files.length === 0 && this.list.length === 0 && state === 1) {
          this.$message({
            message: '操作失败:您未填写任何信息',
            type: 'error'
          })
          return false
        }
      } else {
        if (this.files.length === 0 && state === 1) {
          this.$message({
            message: '操作失败:您未填写任何信息',
            type: 'error'
          })
          return false
        }
      }
      if (this.files2.length === 0 && state === 3) {
        this.$message({
          message: '操作失败:您未填写任何信息',
          type: 'error'
        })
        return false
      }
      if (this.files3.length === 0 && state === 4) {
        this.$message({
          message: '操作失败:您未填写任何信息',
          type: 'error'
        })
        return false
      }
      this.$confirm('确认操作?', '提示', {
        type: 'warning'
      }).then(() => {
        var date = new Date() // 获取时间
        var year = date.getFullYear() // 获取年
        var month = date.getMonth() + 1 // 获取月
        var strDate = date.getDate() // 获取日
        let myDate = year + '-' + this.getNum(month) + '-' + this.getNum(strDate)
        let para = {
          id: this.unitBatchId
        }
        console.log(this.step)
        switch (this.step) {
          case 'bus_announcement':
            para.announcementState = state
            para.announcementNew = 1
            para.announcementSubmitTime = myDate
            if (state === 5 || state === 3) {
              para.announcementRemark = this.backForm.remark
            }
            break
          case 'bus_candidate_announcement':
            para.candidateAnnouncementState = state
            para.candidateAnnouncementNew = 1
            para.candidateAnnouncementSubmitTime = myDate
            if (state === 5 || state === 3) {
              para.candidateAnnouncementRemark = this.backForm.remark
            }
            break
        }
        console.log(para)
        this.btnLoading = true
        this.$http.post(this.$http.defaults.recruitAPI + `api/recruitBusUnitBatch/save`, para).then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.backFormVisible = false
            this.$emit('getDetails')
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
          }
        }).catch(error => {
          this.btnLoading = false
          console.log(error)
          this.$message({
            message: '操作失败:' + error,
            type: 'error'
          })
        })
      })
    }
  }
}
</script>
<style scoped>
  .mytable{
    border-top: 1px solid #74a6cc;
    border-left: 1px solid #74a6cc;
    margin:0 10px 10px;
    width: calc(100% - 20px);
  }
  .mytable th{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
    background: #FAFAFA;
    width:200px;
    text-align:right;
  }
  .mytable td{
    padding: 10px;
    border-right: 1px solid #74a6cc;
    border-bottom: 1px solid #74a6cc;
    vertical-align: top;
    line-height: 150%;
  }
</style>
<style>
#recruitTable .el-table{
  border:1px solid #95B8E7 !important;
}
#recruitTable .el-table td, #recruitTable .el-table th{
  border-right:1px solid #95B8E7 !important;
  border-bottom:1px solid #95B8E7 !important;
}
</style>
